<template>
  <!--第二步-->
  <div>
    <el-tabs type="border-card" style="margin-top: 15px;">
      <el-tab-pane label="商家">
        <div style="float: left;margin-bottom: 10px;" v-if="this.auth =='0'">
          <el-button type="primary" size="mini" @click="querySupplierListForAdd()">添加商家</el-button>
          <el-button type="danger" size="mini" @click="delAllSelectedSuppliermerchantTableData2()">批量删除</el-button>
        </div>
        <el-table :data="merchantTableData2" border style="width: 100%"
                  @selection-change="merchantTableData2selectionChange">
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="id" label="商品编号">
            <template slot-scope="scope">
              <span>{{ scope.row.orgNumber}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商家名称">
            <template slot-scope="scope">
              <span>{{ scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="组织分类">
            <template slot-scope="scope">
              <!--<span>{{ scope.row.merchantType}}</span>-->
              <span v-if="scope.row.merchantType =='1'">自营商家</span>
              <span v-if="scope.row.merchantType =='2'">第三方商户</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" v-if="this.auth =='0'">
            <template slot-scope="scope">
              <el-button type="text" class="textButton" @click="merchantTableData2delete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页栏-->
        <div class="toolbar" style="padding:10px;">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="mainMerchantRefreshPageRequest"
            :current-page="mainMerchantForm.pageNo"
            :page-size="mainMerchantForm.pageSize"
            :total="mainMerchantTableDataTatol"
            style="float:right;"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="mainMerchantHandleSizeChange"
          ></el-pagination>
        </div>
      </el-tab-pane>


      <el-tab-pane label="店铺">
        <div style="float: left;margin-bottom: 10px;" v-if="this.auth =='0'">
          <el-button type="primary" size="mini" @click="querySupplierListForAdd2()">添加店铺</el-button>
          <el-button type="danger" size="mini" @click="delAllSelectedSupplierstoreTableData()">批量删除</el-button>
        </div>
        <el-table :data="storeTableData" border style="width: 100%" @selection-change="storeTableDataselectionChange">
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="店铺编号">
            <template slot-scope="scope">
              <span>{{ scope.row.storecode}}</span>
            </template>
          </el-table-column>
          <el-table-column label="店铺名称">
            <template slot-scope="scope">
              <span>{{ scope.row.storename}}</span>
            </template>
          </el-table-column>
          <el-table-column label="店铺类型">
            <template slot-scope="scope">
              <span v-if="scope.row.storeType =='1'">线上店铺</span>
              <span v-else>线下店铺</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" v-if="this.auth =='0'">
            <template slot-scope="scope">
              <el-button type="text" class="textButton" @click="storeDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页栏-->
        <div class="toolbar" style="padding:10px;">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="mainSroreMerchantRefreshPageRequest"
            :current-page="mainStoreMerchantForm.pageNo"
            :page-size="mainStoreMerchantForm.pageSize"
            :total="storeTableDataTatol"
            style="float:right;"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="mainSroreMerchantHandleSizeChange"
          ></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 选择参与商家 -->
    <el-dialog :title="'添加商家'" width="40%" :visible.sync="editDialogVisible" :close-on-click-modal="false">
      <div>
        <div>
          <el-form :inline="true" :model="merchantForm" size="mini" ref="merchantForm">
            <el-form-item label="商家编号" label-width="100px" prop="orgNumber">
              <el-input v-model="merchantForm.orgNumber" placeholder="" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="商家名称" label-width="100px" prop="name">
              <el-input v-model="merchantForm.name" placeholder="" size="mini"></el-input>
            </el-form-item>
          </el-form>
          <el-row style="text-align: left;padding-left: 32px;">
            <el-button size="mini" @click="merchantFormFind()">查询</el-button>
            <el-button size="mini" @click="resetForm('merchantForm')">重置</el-button>
          </el-row>
        </div>
        <div style="padding-top: 45px;">
          <el-table :data="merchantTableData" border style="width: 100%" @selection-change="addSelectionChange">
            <el-table-column type="selection"></el-table-column>
            <el-table-column width="285px" align="center" label="商家编号">
              <template slot-scope="scope">
                <span>{{ scope.row.orgNumber}}</span>
              </template>
            </el-table-column>
            <el-table-column width="389px" align="center" label="商家名称">
              <template slot-scope="scope">
                <span>{{ scope.row.name}}</span>
              </template>
            </el-table-column>
          </el-table>
          <!--分页栏-->
          <div class="toolbar" style="padding:10px;">
            <el-pagination
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="refreshPageRequest"
              :current-page="merchantForm.start"
              :page-size="merchantForm.limit"
              :total="merchantTableDataTatol"
              style="float:right;"
              :page-sizes="[10, 20, 30, 40]"
              @size-change="handleSizeChange"
            ></el-pagination>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="editDialogVisible = false">取消</el-button>
        <el-button :size="size" type="primary" @click.native="editDialogVisible = false"
                   @click="merchantTableDataSubmit">确定
        </el-button>
      </div>
    </el-dialog>
    <!-- 选择参与店铺 -->
    <el-dialog :title="'添加参与店铺'" width="60%" :visible.sync="editDialogVisible2" :close-on-click-modal="false">
      <div>
        <div>
          <el-form :inline="true" :model="storeForm" size="mini">
            <el-form-item label="店铺名称" label-width="100px">
              <el-input v-model="storeForm.storename" placeholder="" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="店铺编号" label-width="100px">
              <el-input v-model="storeForm.storecode" placeholder="" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="所属商家编号" label-width="100px">
              <el-input v-model="storeForm.orgNumber" placeholder="" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="所属商家名称" label-width="100px">
              <el-input v-model="storeForm.name" placeholder="" size="mini"></el-input>
            </el-form-item>
          </el-form>
          <el-row style="text-align: left;padding-left: 32px;">
            <el-button size="mini" @click="storeFormFind()">查询</el-button>
            <el-button size="mini" @click="querySupplierListForAdd2()">重置</el-button>
          </el-row>
        </div>
        <div style="padding-top: 45px;">
          <el-table :data="storeTableData2" border style="width: 100%"
                    @selection-change="storeTableData2AddSelectionChange">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="id" label="店铺编号">
              <template slot-scope="scope">
                <span>{{ scope.row.storeCode}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="productName" label="店铺名称">
              <template slot-scope="scope">
                <span>{{ scope.row.storeName}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="productName" label="所属商家">
              <template slot-scope="scope">
                <span>{{ scope.row.merchantName}}</span>
              </template>
            </el-table-column>
          </el-table>
          <!--分页栏-->
          <div class="toolbar" style="padding:10px;">
            <el-pagination
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="refreshPageRequestStore"
              :current-page="merchantFormStore.start"
              :page-size="merchantFormStore.limit"
              :total="merchantTableDataTatolStore"
              style="float:right;"
              :page-sizes="[10, 20, 30, 40]"
              @size-change="handleSizeChangeStore"
            ></el-pagination>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="editDialogVisible2 = false">取消</el-button>
        <el-button :size="size" type="primary" @click.native="editDialogVisible2 = false" @click="storeTableData2Click">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  export default {
    components: {},
    data() {
      return {
        promotion: {
          //促销id
          id: "",
          promotionId: "1",
          merchantType: "1",
        },
        promotionId: 0,
        size: "small",
        editDialogVisible: false,
        editDialogVisible2: false,
        mainMerchantForm: {
          promotionId: this.promotionId,
          merchantType: "1",
          pageNo: 1,
          pageSize: 10,
          orderBys: {
            "f": "create_time",
            "s": "desc"
          }
        },
        mainMerchantTableDataTatol: 0,
        merchantForm: {
          start: 1,
          limit: 10,
        },
        merchantFormStore: {
          start: 1,
          limit: 10,
        },
        auth: 0,
        merchantTableDataTatol: 0,
        merchantTableDataTatolStore: 0,
        merchantTableData: [],
        //选择的商家列表
        merchantTableData2: [],
        //---------------------------商家------------------------------------------------end
        storeForm: {
          start: 1,
          limit: 10,
          merchantIds: "",
          storename: "",
          storecode: "",
          orgNumber: "",
          name: "",
        },
        mainStoreMerchantForm: {
          promotionId: this.promotionId,
          merchantType: "2",
          pageNo: 1,
          pageSize: 10,
          orderBys: {
            "f": "create_time",
            "s": "desc"
          }
        },
        storeTableDataTatol: 0,
        storeTableData: [],
        //选择店铺
        storeTableData2Tatol: 0,
        storeTableData2: [],
        //选择店铺
        addSelectionStoreTableData2: [],
        merchantTableData2Selection: [],
        merchantTableData2SelectionIndex: 0,
        storeTableDataSelection: [],
        storeTableDataSelectionIndex: 0,
        pomotionListObject: {pomotionList: []},
      };
    },
    mounted() {
    },
    methods: {
      init(promotionId) {
        this.promotionId = promotionId;
      },
      //添加商家
      querySupplierListForAdd() {
        this.editDialogVisible = true;
        this.promotion.merchantType = 1;
      },
      //添加店铺
      querySupplierListForAdd2() {
        this.editDialogVisible2 = true;
        this.promotion.merchantType = 2;
      },
      //批量删除商家
      delAllSelectedSuppliermerchantTableData2() {
        if (this.merchantTableData2Selection.length == 0) {
          this.$message({message: "未选择删除条目", type: "error"});
          return;
        }
        // this.merchantTableData2Selection;
        let ids = this.merchantTableData2Selection.map(item => item.id).toString();
        let idArray = (ids + "").split(",");
        this.delAllSelectedSupplierQueryList(idArray);
      },
      delAllSelectedSupplierQueryList(idArray) {
        let that = this;
        this.promotion.merchantType = "1";
        this.promotion.id = idArray[this.merchantTableData2SelectionIndex];
        this.utils.request.promotionMerchantDeleteById(this.promotion, function () {
          that.merchantTableData2SelectionIndex++;
          if (that.merchantTableData2SelectionIndex <= idArray.length) {
            that.delAllSelectedSupplierQueryList(idArray)
          } else {
            //执行成功
            that.merchantTableData2SelectionIndex = 0;
            that.$message({message: "删除成功", type: "success"});
            that.mainMerchantFormFind();
          }
        });
      },
      storeTableDataselectionChange(val) {
        this.storeTableDataSelection = val;
      },
      merchantTableData2selectionChange(val) {
        this.merchantTableData2Selection = val;
      },
      //选择店铺
      storeTableData2AddSelectionChange(val) {
        this.addSelectionStoreTableData2 = val;
      },
      //确定 选择店铺
      storeTableData2Click() {
        console.log(this.addSelectionStoreTableData2);
        // 调添加店铺 关系接口
        this.merchantTableDataSubmit2();
      },
      merchantTableDataSubmit2() {
        let callback = res => {
          console.log(res);
          if (res.code == "0000") {
            this.storeSaveBatch();
          }
        };
        //调接口
        //删除这个活动老的数据
        //批量添加新的数据
        this.promotion.id = null;
        this.promotion.promotionId = this.promotionId;
        this.promotion.merchantType = "2";
        this.utils.request.promotionMerchantDeleteByPromotionId(this.promotion, callback);
      },

      //批量添加店铺
      storeSaveBatch() {
        this.pomotionListObject.pomotionList.splice(0, this.pomotionListObject.pomotionList.length);
        for (let i = 0; i < this.addSelectionStoreTableData2.length; i++) {
          let temp = {};
          temp.promotionId = this.promotionId;
          temp.storeId = this.addSelectionStoreTableData2[i].id;
          temp.merchantType = "2";
          temp.storeName = this.addSelectionStoreTableData2[i].storeName;
          temp.storeCode = this.addSelectionStoreTableData2[i].storeCode;
          temp.storeType = this.addSelectionStoreTableData2[i].storeType;
          this.pomotionListObject.pomotionList.push(temp);
        }
        let callback = res => {
          if (res.code == "0000") {
            this.mainStoreTableDataFormFind();
          }
        };
        this.utils.request.promotionMerchantSaveBatch(this.pomotionListObject, callback);
      },
      merchantTableData2delete(id) {
        console.log(id);
        console.log("删除商家");

        let callback = res => {
          console.log(res);
          this.mainMerchantFormFind();
          if (res.code == "0000" && res.data == "1") {
            //删除成功再调分页
            this.$message({message: "删除成功", type: "success"});

          } else {
            this.$message({message: "操作失败, " + res.msg, type: "error"});
          }
        };

        this.promotion.id = id;
        this.utils.request.promotionMerchantDeleteById(this.promotion, callback);
      },
      //选择商家
      addSelectionChange(val) {
        this.addSelection = val;
        console.log(this.addSelection);
      },
      //提交 选择商家
      merchantTableDataSubmit() {
        let callback = res => {
          if (res.code == "0000") {
            this.promotionMerchantSaveBatch();
          }
        };
        //调接口
        //删除这个活动老的数据
        //批量添加新的数据
        this.promotion.id = null;
        this.promotion.promotionId = this.promotionId;
        this.promotion.merchantType = "1";
        this.utils.request.promotionMerchantDeleteByPromotionId(this.promotion, callback);
      },
      // 换页刷新
      mainMerchantRefreshPageRequest: function (pageNum) {
        this.mainMerchantForm.pageNo = pageNum;
        this.mainMerchantFormFind();
      },
      // 换页刷新
      mainMerchantHandleSizeChange: function (pageSize) {
        this.mainMerchantForm.pageNo = 1;
        this.mainMerchantForm.pageSize = pageSize;
        this.mainMerchantFormFind();
      },
      //查询绑定关系的商家
      mainMerchantFormFind() {
        this.mainMerchantForm.merchantType = "1";
        let this__ = this;
        this.mainMerchantForm.promotionId = this.promotionId;
        this.utils.request.promotionMerchantList(this.mainMerchantForm, function (res) {
          console.log(res);
          if (res.code == "0000") {
            let ret = [];
            for (let i = 0; i < res.data.list.length; i++) {
              let temp = {};
              temp.id = res.data.list[i].id;
              temp.name = res.data.list[i].merchantName;
              temp.orgNumber = res.data.list[i].orgNumber;
              temp.merchantType = res.data.list[i].merchantTypeManager;
              temp.merchantId = res.data.list[i].merchantId;
              ret.push(temp);
            }
            this__.merchantTableData2 = ret;
            this__.mainMerchantTableDataTatol = res.data.totalCount;
          }
        });
      },
      // 删除店铺
      storeDelete(id) {
        let callback = res => {
          console.log(res);
          this.mainStoreTableDataFormFind();

          if (res.code == "0000" && res.data == "1") {
            //删除成功再调分页
            this.$message({message: "删除成功", type: "success"});

          } else {
            this.$message({message: "操作失败, " + res.msg, type: "error"});
          }
        };

        this.promotion.id = id;
        this.utils.request.promotionMerchantDeleteById(this.promotion, callback);
      },
      delAllSelectedSupplierstoreTableData() {
        if (this.storeTableDataSelection.length == 0) {
          this.$message({message: "未选择删除条目", type: "error"});
          return;
        }
        let ids = this.storeTableDataSelection.map(item => item.id).toString();
        let idArray = (ids + "").split(",");
        this.delAllSelectedSupplierstoreTableDataQueryList(idArray);
      },
      // 换页刷新
      mainSroreMerchantRefreshPageRequest: function (pageNum) {
        this.mainStoreMerchantForm.pageNo = pageNum;
        this.mainStoreTableDataFormFind();
      },
      // 换页刷新
      mainSroreMerchantHandleSizeChange: function (pageSize) {
        this.mainStoreMerchantForm.pageNo = 1;
        this.mainStoreMerchantForm.pageSize = pageSize;
        this.mainStoreTableDataFormFind();
      },
      // 换页刷新
      refreshPageRequest: function (pageNum) {
        this.merchantForm.start = pageNum;
        this.merchantFormFind();
      },
      // 换页刷新
      handleSizeChange: function (pageSize) {
        this.merchantForm.limit = pageSize;
        this.merchantForm.start = 1;
        this.merchantFormFind();
      },
      // 换页刷新
      refreshPageRequestStore: function (pageNum) {
        this.merchantFormStore.start = pageNum;
        // this.merchantFormFind();
        this.storeFormFind();
      },
      // 换页刷新
      handleSizeChangeStore: function (pageSize) {
        this.merchantFormStore.limit = pageSize;
        this.merchantFormStore.start = 1;
        this.storeFormFind();
      },
      //查询店铺
      storeFormFind() {
        let ids = this.merchantTableData2.map(item => item.merchantId).toString();
        let idArray = (ids + "").split(",");
        let params = [];
        for (let i = 0; i < idArray.length; i++) {
          params.push({id: idArray[i]});
        }
        if (this.merchantTableData2.length == 0) {
          this.$message({message: "请先选择商家", type: "success"});
        }
        this.storeTableData2.splice(0, this.storeTableData2.length);
        let this__ = this;
        this.storeForm.merchantIds = ids;
        this.utils.request.queryByIds(this.storeForm, function (res) {
          if (res.code == "0000") {
            this__.storeTableData2 = res.data.rows;
            this__.merchantTableDataTatolStore = res.total;
          }
        });

      },
      //查询商家
      merchantFormFind() {
        let this__ = this;
        this.utils.request.queryMerchantList(this.merchantForm, function (res) {
          if (res.code == "0000") {
            this__.merchantTableData = res.data.rows;
            this__.merchantTableDataTatol = res.data.totle;
          }
        });
      },

      promotionMerchantSaveBatch() {
        let this__ = this;
        this__.pomotionListObject.pomotionList.splice(0, this__.pomotionListObject.pomotionList.length);
        for (let i = 0; i < this__.addSelection.length; i++) {
          let temp = {};
          temp.promotionId = this__.promotionId;
          temp.merchantId = this__.addSelection[i].id;
          temp.merchantType = "1";
          temp.merchantName = this__.addSelection[i].name;
          temp.merchantTypeManager = this__.addSelection[i].merchantType;
          temp.orgNumber = this__.addSelection[i].orgNumber;
          temp.name = this__.addSelection[i].name;
          this__.pomotionListObject.pomotionList.push(temp);
        }
        let callback = res => {
          console.log(res);
          if (res.code == "0000") {
            this.mainMerchantForm.merchantType = "1";
            this.mainMerchantFormFind();
          }
        };
        this.utils.request.promotionMerchantSaveBatch(this__.pomotionListObject, callback);
      },
      //查询绑定关系的店铺
      mainStoreTableDataFormFind() {
        this.mainMerchantForm.merchantType = "2";
        this.mainMerchantForm.promotionId = this.promotionId;
        let this__ = this;
        this.utils.request.promotionMerchantList(this.mainMerchantForm, function (res) {
          if (res.code == "0000") {
            let ret = [];
            for (let i = 0; i < res.data.list.length; i++) {
              let temp = {};
              temp.promotionId = res.data.list[i].promotionId;
              temp.id = res.data.list[i].id;
              temp.storeId = res.data.list[i].storeId;
              temp.storeName = res.data.list[i].storename;
              temp.storeCode = res.data.list[i].storecode;
              temp.storeType = res.data.list[i].storeType;
              ret.push(temp);
            }
            //店铺调试
            this__.storeTableData = res.data.list;
            this__.storeTableDataTatol = res.data.totalCount;
          }
        });
      },
      delAllSelectedSupplierstoreTableDataQueryList(idArray){
        let that = this;
        this.promotion.merchantType = "2";
        this.promotion.id = idArray[this.storeTableDataSelectionIndex];
        this.utils.request.promotionMerchantDeleteById(this.promotion, function(){
          that.storeTableDataSelectionIndex++;
          if(that.storeTableDataSelectionIndex<=idArray.length){
            that.delAllSelectedSupplierstoreTableDataQueryList(idArray)
          }else{
            //执行成功
            that.storeTableDataSelectionIndex = 0;
            that.$message({message: "删除成功", type: "success"});
            that.mainStoreTableDataFormFind();
          }
        });
      },
    }
  };
</script>

<style scoped>

</style>
